<template>
  <el-container>
    <el-main>
      <div class="toolbar">
        <el-select v-model="sortOption" placeholder="排序方式" @change="sortBooks">
          <el-option label="按更新时间" value="updateTime"></el-option>
          <el-option label="按喜好程度" value="preference"></el-option>
        </el-select>
      </div>
      <div class="bookshelf">
        <el-tooltip
          v-for="book in displayedBooks"
          :key="book.id"
          :content="book.name"
          placement="top"
        >
          <div
            class="book-item"
            @click="() => goToBook(book.id)"
          >
            <el-badge
              :is-dot="updateReminder && newUpdate(book)"
              class="book-badge"
              :offset="[-5, 5]"
            >
              <el-card :body-style="{ padding: '0px' }">
                <img :src="book.cover_url" class="book-cover" alt="book cover" />
              </el-card>
            </el-badge>
          </div>
        </el-tooltip>
      </div>
      <div class="pagination-container">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="books.length"
        ></el-pagination>
        <!-- <el-switch
          :model-value="updateReminder"
          active-text="更新提醒"
          inactive-text="关闭提醒"
          @change="toggleUpdateReminder"
        ></el-switch> -->
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, computed, watch, getCurrentInstance, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import img1 from '@/images/1.jpg'
import img2 from '@/images/2.jpg'
import img3 from '@/images/3.jpg'
import img4 from '@/images/4.jpg'
import img5 from '@/images/5.jpg'
const { proxy } = getCurrentInstance();
const router = useRouter();
const books = ref([
]);

const currentPage = ref(1);
const pageSize = 10;
const displayedBooks = ref([]);
const clickable = ref(true);

const sortOption = ref('updateTime');

const sortedBooks = computed(() => {
  console.log('888888888888888','更新时间')
  return [...books.value].sort((a, b) => {
    if (sortOption.value === 'updateTime') {
        console.log('888888888888888',b.time_published)
      return new Date(b.time_published) - new Date(a.time_published);
    } else if (sortOption.value === 'preference') {
      return b.hot_number - a.hot_number;
    }
    return 0;
  });
});

const goToBook = (bookId) => {
  // const book = books.value.find(b => b.id === bookId);
  // console.log('bookid',bookId)
  // if (book) {
  //   book.lastReadTime = new Date().toISOString().split('T')[0];
  // }
  if (clickable.value) {
    router.push({ name: 'BookDetail', params: { id: bookId } });
  }
};

const newUpdate = (book) => {
  return new Date(book.updateTime) > new Date(book.lastReadTime);
}

const sortBooks = () => {
  books.value = sortedBooks.value;
  updateDisplayedBooks();
};

const updateDisplayedBooks = () => {
  const start = (currentPage.value - 1) * pageSize;
  const end = start + pageSize;
  displayedBooks.value = books.value.slice(start, end);
};

watch([currentPage, books], updateDisplayedBooks, { immediate: true });

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
};

const updateReminder = ref(true);

const toggleUpdateReminder = () => {
  updateReminder.value = !updateReminder.value;
};

onMounted(async () => {
     await proxy.$http.get('/api/book/get-bookshelf').then(response=>{
      console.log('99999999999',response.data)
      if(response.data.data)
      {  ///api/book/get-bookshelf
        books.value = response.data.data.book;
      }
      sortBooks();
    });
});
</script>

<style scoped>
.toolbar {
  margin-bottom: 10px;
  width: 15%;
  margin-left: auto;
}
.bookshelf {
  width: 100%;
  height: 340px;
  display: flex;
  flex-wrap: wrap;
  padding-left: 7%;
  column-gap: 6%;
  row-gap: 3%;
}
.book-item {
  width: 13%;
  cursor: pointer;
  position: relative;

}
.book-cover:hover {
    border: 4px solid rgba(255, 255, 255, 0.6);
    box-shadow: 2px 1px 19px rgba(0, 0, 0, 0.1);
}
.book-cover {
  width: 130px;
  height: 165px;
  transition: box-shadow 0.3s ease;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.el-switch {
  position: absolute;
  right: 10px;
}
</style>